<template>
<!-- 我的名片 -->
    <el-card class="scroll-item">
        <!-- <div slot="header" class="me-name">
            <i class="el-icon-s-custom"></i>
            <span>我的名片</span>
        </div> -->
        
        <div class="me-img">
            <el-avatar src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1194131577,2954769920&fm=26&gp=0.jpg"></el-avatar>
        </div>
        <div class="me-description">
            <p>自称：小和</p>
            <p>处境：社会小白</p>
            <p>现居：广东省 - 广州市</p>
            <p>Email: 1785229693@qq.com</p>
            <p>QQ: 1785229693</p>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'Me',
    // 传过来的数据
    data(){
        return {
            info: [{},{}]
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
el-card{
    width: 100%;
    box-shadow: 2px 4px 4px 2px rgba(0, 0, 0, .2);
}
.me-img {
    text-align: center;
    margin: 0 0 10px 0;
    height: auto;
    /* padding: 10px; */
}
.me-img .el-avatar{
    display: block;
    /* text-align: center; */
    margin: auto;
    width: 60px;
    height: 60px;
    /* border: 2px solid #FFF; */
}
.me-name i{
    font-size: 20px;
    color: #ff9401;
    font-weight: bold;
}
.me-name span{
    font-size: 16px;
    font-weight: bold;
}
.me-description{
    text-align: left;
}
.me-description p{
    font-size: 14px;
    font-weight: 500;
    padding: 3px 0;
    line-height: 1.5;
}
.me-description span{
    padding: 0 5px;
}
</style>